<template>
  <van-nav-bar @click-left="onClickLeft" @click-right="onClickRight">
    <template #left>
      <i class="iconfont iconbtn_nav_back"></i>
    </template>
    <template #title>
      <span class="title">{{ title }}</span>
    </template>
    <template #right>
      <span v-if="rightText">{{ rightText }}</span>
    </template>
  </van-nav-bar>
</template>

<script lang="ts" setup>
import { defineProps, defineEmit, useContext, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
// 获取组件实例
const instance: any = getCurrentInstance()
// 上下文
const ctx = useContext()
// 路由对象
const router = useRouter()
defineProps({
  title: {
    type: String,
    default: ''
  },
  rightText: {
    type: String
  }
})
defineEmit(['click-right'])
const onClickLeft = () => {
  router.back()
}
const onClickRight = () => {
  if (!instance.props.rightText) return
  ctx.emit('click-right')
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__left {
  padding: 0px;
}
.iconfont {
  font-size: 40px;
}
.title {
  height: 25px;
  opacity: 1;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #222222;
  line-height: 25px;
  letter-spacing: 0px;
}
</style>
